<template>
  <div class="cart">
    <div class="header">
      <van-cell :title="'购物车(' + this.getCartGoods().length + ')'" />
    </div>

    <div class="goods" v-if="this.getCartGoods().length > 0">
      <div class="items">
        <div class="item" v-for="item in this.getCartGoods()" :key="item.id">
          <div class="goods-checkbox">
            <input @change="updateCart(item)" type="checkbox" v-model="item.sel" :id="item.id">
            <label :for="item.id"></label>
          </div>
          <div class="img">
            <img :src="item.img_url">
          </div>
          <div class="info">
            <h4>{{ item.name }}</h4>
            <p>订单编码：{{ item.goods_id }}</p>
            <div class="price">
              <div class="money">
                <span>单价：<em>{{ item.price }}</em></span>
              </div>
              <div class="num">
                <van-stepper :disabled="disabledStep" @change="updateCart(item)" v-model="item.num" min="1"
                  :max="item.multi_buy_limit.first" />
              </div>
            </div>
            <div class="del">
              <van-icon name="delete-o" @click="remove(item.id)" />
            </div>
          </div>
        </div>
      </div>
      <van-submit-bar :price="total()" :button-text="'去结算(' + this.getCartGoods().length + ')'" @submit="onSubmit">
        <van-checkbox @click="changesAll" checked-color="#ee0a24" v-model="checkall">全选</van-checkbox>
      </van-submit-bar>
    </div>

    <div class="empty" v-else>
      <van-empty description="购物车还没有产品~">
        <van-button round type="danger" class="bottom-button">去购物</van-button>
        <template #image>
          <img src="@/assets/img/cart/empty.png">
        </template>
      </van-empty>
    </div>
  </div>
</template>
  
<script>
import vuex from "vuex"

export default {
  data() {
    return {
      checkall: true,
      disabledStep: false
    };
  },
  created() {
    this.getCartAsync().then(res => {
      console.log("初始化购物车数据", res);
      this.setCheckAll()
    })
  },
  methods: {
    ...vuex.mapActions(["updateCartAsync", "getCartAsync", "deletCartAsync"]),
    ...vuex.mapGetters(['getCartGoods']),
    total() {
      let all = 0
      this.getCartGoods().forEach(item => {
        if (item.sel) {
          all += item.num * item.price
        }
      })
      return all * 100
    },
    changesAll() {
      if (this.checkall) {
        this.getCartGoods().forEach(item => {
          if (item.sel == 0) {
            item.sel = 1;
            this.updateCart(item)
          }
        })
      }
      else {
        this.getCartGoods().forEach(item => {
          item.sel = 0;
          this.updateCart(item)
        })
      }
    },
    setCheckAll() {
      // let all = true;
      this.checkall = this.getCartGoods().every(item => {
        return item.sel == 1;
      })
    },
    updateCart(good) {
      this.disabledStep = true;
      this.updateCartAsync(good).then(res => {
        console.log(res);
        this.setCheckAll();
        this.disabledStep = false;
      })
    },
    goSome(name) {
      this.$router.push({ name })
    },
    onSubmit() {
      console.log("点击了提交");
    },
    remove(id) {
      // console.log(id);
      this.$dialog.confirm({
        message: '要删除选择的产品？',
        confirmButtonText: '确定',
        cancelButtonText: "取消",
        confirmButtonColor: "#f74747",
        cancelButtonColor: "#333",
        width: "293px",
        className: "mydel"
      })
        .then(() => {
          this.deletCartAsync(id).then(res => {
            if (res.code == 0) {
              this.$toast("删除成功")
            }
          })
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
};
</script>

<style lang="less">
.cart {
  background-color: #f9f9f9;
  min-height: 100vh;

  .header {
    .van-cell {
      position: relative;
      padding: 0;
      text-align: left;
      padding-left: 12px;

      .van-cell__title {
        top: -1px;
        color: #f74747;
        border-bottom: 2px solid red;
        position: relative;
        font-size: 18px;
        height: 47px;
        line-height: 47px;
        margin: 0px 3px;
        font-weight: 400;
        flex: none;
      }

      .van-cell__value {
        font-size: 14px;
        color: #333;
        line-height: 47px;
        width: 47px;
        height: 47px;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
      }
    }
  }

  .empty {
    .van-empty {
      padding-top: 100px;

      .van-empty__image {
        width: 117px;
        height: 88px;
      }

      .van-empty__description {
        text-align: center;
        color: #999;
        font-size: 13px;
        padding: 12px 0;
      }

      .van-empty__bottom {
        margin-top: 23.5px;

        .bottom-button {
          width: 205px;
          height: 40px;
          background: #f74747;
          font-size: 17.5px;
          display: block;
          margin: 0 auto;
          text-align: center;
          line-height: 40px;
          color: #fff;
          border-radius: 5px;
        }

      }
    }
  }

  .goods {
    padding-bottom: 110px;

    .items {
      background-color: #f9f9f9;

      .item {
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        height: 140px;
        align-items: center;
        width: 100vw;
        flex-shrink: 0;
        background-color: white;

        .goods-checkbox {
          flex: 0 0 44px;
          display: flex;
          align-items: center;
          justify-content: center;

          input[type='checkbox'] {
            display: none;
          }

          input[type='checkbox']+label {
            display: flex;
            width: 20px;
            height: 20px;
            align-items: center;
            background-image: url("@/assets/img/cart/check.png");
            background-size: 100%;
          }

          input[type='checkbox']:checked+label {
            background-image: url("@/assets/img/cart/checked.png");
          }
        }

        .img {
          flex: 0 0 79px;
          height: 79px;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
        }

        .info {
          margin-left: 15.5px;
          min-height: 90px;
          font-weight: 400;
          padding-right: 12px;
          padding-top: 12px;
          flex: 1;

          h4 {
            font-weight: 400;
            line-height: 1.5;
            word-break: break-all;
            font-size: 14px;
            color: #333;
            height: 39px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          p {
            margin-top: 6px;
            font-size: 12px;
            color: #999;
          }

          .price {
            margin-top: 3.5px;
            display: flex;
            justify-content: space-between;

            .money {
              line-height: 13px;
              font-size: 13px;
              padding-top: 8px;
              padding-bottom: 15px;

              span {
                color: #666;

                em {
                  color: #f74747;
                }
              }
            }

            .num {
              margin-bottom: 12px;

              .van-stepper {

                .van-stepper__minus,
                .van-stepper__plus {
                  background-color: white;
                  font-weight: 100;
                  font-size: 30px;
                  width: 23.5px;
                  height: 23.5px;
                  line-height: 21px;
                  display: block;
                  float: left;
                  text-align: center;
                  border: 1px solid #cecece;
                  color: #333;
                }

                .van-stepper__input {
                  background-color: white;
                  font-size: 14px;
                  width: 30px;
                  height: 23.5px;
                  line-height: 21px;
                  display: block;
                  float: left;
                  padding: 0;
                  margin: 0;
                  border: 1px solid #cecece;
                  color: #333;
                  border-radius: 0px;
                }

                .van-stepper__minus {
                  border-top-left-radius: 3px;
                  border-bottom-left-radius: 3px
                }

                .van-stepper__plus {
                  border-top-right-radius: 3px;
                  border-bottom-right-radius: 3px
                }

                .van-stepper__minus--disabled {
                  color: #e2e2e2;
                }
              }
            }
          }

          .del {
            display: flex;
            justify-content: flex-end;

            i {
              font-size: 18px;
            }
          }
        }
      }
    }

    .van-submit-bar {
      bottom: 50px;

      .van-submit-bar__bar {
        padding-right: 0px;

        .van-checkbox__label {
          font-size: 14px;
          color: #666;
        }

        .van-submit-bar__text {
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-size: 12px;
            color: #333;
            font-weight: 400;
          }

          .van-submit-bar__price {
            color: #f74747;

            .van-submit-bar__price {
              font-size: 12px;
            }
          }
        }

        .van-button {
          border-radius: 0px;
          height: 100%;
          background: #f74747;
          color: #fff;
          display: block;
          font-size: 17px;
        }
      }
    }
  }
}

.mydel {
  border-radius: 5px;

  .van-dialog__content {
    .van-dialog__message {
      font-size: 17.5px;
      color: #333;
      font-weight: 400;
    }
  }

  .van-dialog__footer{
    .van-dialog__cancel{
      border-top: 1px solid #d6d6d6;
    }
    .van-button::after{
      border: 1px solid #d6d6d6;
    }
  }
}
</style>